<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="css/public.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery-1.7.2.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/mapConfig.js"></script>
    <script src="objClass/objQuery.js"></script>
    <script src="objClass/objFunction.js"></script>
    <script src="objClass/objGeoStyle.js"></script>
    <script src="objClass/objBubble.js"></script>
    <script src="objClass/objGeometry.js"></script>
    <script src="objClass/objInfowindow.js"></script>
    <script src="js/mapThemePopo.js"></script>
    <script src="js/mapPublicFunction.js"></script>

    <style>
        .esriPopup .titleButton.maximize {
            display: none;
        }
        ul {
            list-style: none;
        }

        ul, li {
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        var receiveObj = {};             //
        var receiveMsgCity = "";         // 从前端接受到的城市名称
        var receiveMsgCommunityId = "";  // 从前端接受到的小区ID
        var receiveMsgMatchStatus = "";  // 匹配状态
        var map;
        var baseLayer;
        var imgLayer;//影像底图
        var showType;//记录当前显示类型（影像底图、矢量底图）
        var drawTool;   // 绘制工具
        var graphicLayer;
        var hightliteLayer;
        var graphicLayerOldPoint;   // 小区，用于查询显示
        var graphicLayerNewPoint;   // 小区，用户创建新点
        var hightliteLayerArray = [];//记录用绘制工具绘制到地图的图形

        //加载ArcgisAPI样式
        objFunction.loadCss("css/public.css");
        objFunction.loadCss(config.urlAPI + "/dijit/themes/claro/claro.css");
        objFunction.loadCss(config.urlAPI + "/esri/css/esri.css");
        //加载ArcgisAPI脚本
        objFunction.loadJs(config.urlAPI + "/init.js");

        function initPage() {
            dojo.require("esri.map");
            dojo.require("esri.geometry.geodesicUtils");
            dojo.require("esri.tasks.GeometryService");
            dojo.require("esri.tasks.AreasAndLengthsParameters");
            dojo.require("esri.SpatialReference");
            dojo.require("esri.tasks.query");
            dojo.require("dojo.parser");
            dojo.require("esri.Color");
            dojo.require("esri.symbols.Font");
            dojo.require("esri.symbols.TextSymbol");
            dojo.require("esri.symbols.PictureMarkerSymbol");
            dojo.require("esri.tasks.geometry");
            dojo.require("esri.symbols.SimpleFillSymbol");
            dojo.require("esri.toolbars.draw");
            dojo.require("esri.tasks.IdentifyTask");
            dojo.require("esri.tasks.IdentifyParameters");
            dojo.require("esri.units");

            //初始化地图div
            initMap();
            showType = configShowLayerType.Vector;
            baseLayer = new esri.layers.ArcGISTiledMapServiceLayer(config.urlBaseLayer);
            //添加矢量图到map
            map.addLayer(baseLayer);

            imgLayer = new esri.layers.ArcGISTiledMapServiceLayer(config.urlImgLayer);
            map.addLayer(imgLayer);
            imgLayer.hide();

            //初始化基类
            initObj();
            //向地图添加临时层
            addTempLayer();
            //定位到指定范围
            setExtent();
            // 绑定地图事件

          BindMapEvent();
            map.on('load', function (theMap) {
              if(receiveMsgCommunityId != "" && receiveMsgCity != ""){
                queryXQAndZoomToMap(receiveMsgCity,receiveMsgCommunityId);
              }
            });
        }
        function initObj() {
            objQuery.init(config.wkid, map);
            objGeometry.init(config.wkid);
            objInfowindow.init(map);
        }

        //初始化地图div
        function initMap() {
            map = new esri.Map(
                'map'
                ,{
                    logo: false,
                    slider: true,
                    minZoom: config.initZoom2,
                    sliderStyle: "large"
                });
        }

        function setExtent(e) {
            //定位到指定范围
            var extent = new esri.geometry.Extent({
                "xmin": config.xmin_DL, "ymin": config.ymin_DL, "xmax": config.xmax_DL,
                "ymax": config.ymax_DL, "spatialReference": {
                    "wkid": config.wkid
                }
            });
            if (e == "北京市") { //北京
                extent = new esri.geometry.Extent({
                    "xmin": config.xmin_BJ, "ymin": config.ymin_BJ, "xmax": config.xmax_BJ,
                    "ymax": config.ymax_BJ, "spatialReference": {
                        "wkid": config.wkid
                    }
                });
            }
            if (e == "丹东市") { //丹东
                extent = new esri.geometry.Extent({
                    "xmin": config.xmin_DD, "ymin": config.ymin_DD, "xmax": config.xmax_GZ,
                    "ymax": config.ymax_DD, "spatialReference": {
                        "wkid": config.wkid
                    }
                });
            }
            if (e == "珠海市") { //珠海
                extent = new esri.geometry.Extent({
                    "xmin": config.xmin_ZH, "ymin": config.ymin_ZH, "xmax": config.xmax_ZH,
                    "ymax": config.ymax_ZH, "spatialReference": {
                        "wkid": config.wkid
                    }
                });
            }
            if (e == "大连市") { // 大连市
                extent = new esri.geometry.Extent({
                    "xmin": config.xmin_DL, "ymin": config.ymin_DL, "xmax": config.xmax_DL,
                    "ymax": config.ymax_DL, "spatialReference": {
                        "wkid": config.wkid
                    }
                });
            }
            //map.setExtent(extent);
            map.centerAndZoom(extent.getCenter(), config.initZoom);
        }

        //矢量影像切换方法
        function reloadMap(type) {
            if (type == showType) return;

            if (showType == configShowLayerType.Img) {
                //basemap.show();
                showType = configShowLayerType.Vector;
            }
            else if (showType == configShowLayerType.Vector) {
                //imgLayer.show();
                showType = configShowLayerType.Img;
            }
            else {
                return;
            }

            if (showType == configShowLayerType.Img) {
                imgLayer.show();
                baseLayer.hide();
            }
            if (showType == configShowLayerType.Vector) {
                baseLayer.show();
                imgLayer.hide();
            }
        }


        //添加临时层
        function addTempLayer() {
            graphicLayer = new esri.layers.GraphicsLayer();
            map.addLayer(graphicLayer);

            hightliteLayer = new esri.layers.GraphicsLayer();
            map.addLayer(hightliteLayer);

            graphicLayerOldPoint = new esri.layers.GraphicsLayer();
            map.addLayer(graphicLayerOldPoint);

            graphicLayerNewPoint = new esri.layers.GraphicsLayer();
            map.addLayer(graphicLayerNewPoint);
        }
        //地图事件绑定
        function BindMapEvent() {
            dojo.connect(map, "onUpdateEnd", function (e, l, le, lod) {
                ExtentChanged();
            });
//            dojo.connect(map, "onZoomEnd", function (extent, zoomFactor, pt, level) {
//                if (map.getLevel() < 15)
//                    graphicLayer.clear();
//            });
            dojo.connect(graphicLayer, "onClick", function (e) {
                xqId = e.graphic.attributes.ADDRESS_ID;
                xqName = e.graphic.attributes.LABEL;
            });
        }

        //绘制小区点
        function drawPoint() {
            drawTool = new esri.toolbars.Draw(map);

            dojo.connect(drawTool, "onDrawEnd", function eventHandler(geo) {
            	  //graphicLayerOldPoint.clear();
                //hightliteLayer.clear();
                //hightliteLayerArray = [];
                //parent.saveXY(geo.x,geo.y);

                var src = "img/unit-hover.png";
                var res = confirmd();
                if (res) {
                  graphicLayerNewPoint.clear();
                  var graphic = new esri.Graphic(geo, getPointStyle(src, 25, 25));
                  hightliteLayerArray.push(graphic);
                  graphicLayerNewPoint.add(graphic);

                  xqX = geo.x;
                  xqY = geo.y;
                  //xqId = "";
                  //xqName = "";
                }
                else
                	return;
            });
            drawTool.activate(esri.toolbars.Draw.POINT);
        }

        $(document).keyup(function(event){
            switch(event.keyCode) {
                case 27:
                {
                    drawPointSave();
                    hightliteLayer.clear();
                }
                case 96:
                    drawPointCancel();
            }
        });

        function drawPointSave(){
            if (drawTool){
                drawTool.deactivate();
            }
            ok();
        }

        function drawPointClear() {
          if (drawTool){
            drawTool.deactivate();
          }
          graphicLayerNewPoint.clear();
        }

        function ExtentChanged() {
            if (map.getLevel() >= 10 && map.getLevel() <= 17) {
                queryXQ(receiveMsgCity);
            }
//            if (map.getLevel() >= 18) {
//                queryBuilding();
//            }
        }

        function jumpCity() {
            setExtent($("#jumpCity").val());
        }

        function bindEvent(element, eventName, eventHandler) {
          if (element.addEventListener) {
            element.addEventListener(eventName, eventHandler, false);
          } else if (element.attachEvent) {
            element.attachEvent('on' + eventName, eventHandler);
          }
        }

        bindEvent(window, 'message', function (e) {
          var obj = JSON.parse(e.data);
          console.log("receive params>>>>>>: ", obj)
          var type = obj.type;

          if (type == "search") {
            console.log(obj.data.data.entiy);
            var x = obj.data.data.entiy.xCoord;
            var y = obj.data.data.entiy.yCoord;

            var attribute = [];

            //addPopo(graphicLayerOldPoint, x, y, "", 12, 12, attribute, "", "10pt", 5, 13, 1);
            var pt = createPoint(parseFloat(x), parseFloat(y));
            map.centerAndZoom(pt, config.showMapGJXQ);
          }
          if (obj.type != "search" && (!obj.event) && (!obj.draw)) {
            receiveObj = obj.data;
            receiveMsgCity = obj.data.city;
            receiveMsgCommunityId = obj.data.communityId;
            receiveMsgMatchStatus = obj.data.matchStatus;

            setExtent(receiveMsgCity);
          }

          // 绘制
          if (obj.type == "draw") {
          	if (obj.event == "draw")
              drawPoint();
          	else if (obj.event == "draw")
              drawPointSave();
          	else if (obj.event == "clear")
          		drawPointClear();
          }
        });

        //向父级发送消息
        var sendMessage = function (msg) {
          window.parent.postMessage(msg, '*');
        };

        function confirmd() {
          var msg = "修改小区点将删除原来的小区点，确定删除？";
          if (confirm(msg)==true){
            graphicLayerOldPoint.clear();
            return true;
          }else{
            return false;
          }
        }
/*************************************/
/**
 * 设置查询到的小区信息
 */
function setXQInfo(obj){
    xqId = obj.id;
    xqName = obj.name;
    xqX = obj.x;
    xqY = obj.y;
}
/**
 * 操作完成后，提交信息 20181206  wz
 */
function ok(){
	var msg = {};
  msg.projectCode = receiveObj.projectCode;
  msg.flag = receiveObj.matchStatus;
  msg.communityIdOld = receiveObj.communityId;
  msg.communityId = xqId;
  msg.communityName = xqName;
  msg.city = receiveMsgCity;
  msg.x = xqX;
  msg.y = xqY;

  sendMessage(msg);
}
    </script>
</head>
<body style="height:100%; width:100%" onload="initPage()" class="tundra">
<div id="map" style="position:absolute; left:1%; top:1%; width:99%; height:99%;">
</div>
<!--<div style="position:absolute; right:1%; top:1%;">-->
    <!--<label>切换城市：</label>-->
    <!--<select name="jumpCity" id="jumpCity" onchange="jumpCity();">-->
        <!--<option value="1101">北京市</option>-->
        <!--<option value="3101">大连市</option>-->
        <!--<option value="4401">丹东市</option>-->
        <!--<option value="4403">珠海市</option>-->
    <!--</select>-->
<!--</div>-->
</body>
</html>



